<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <div
      :style="{
        backgroundColor: nodeData.currentStyle.fill,
        borderRadius: '50% 50% 0 0 ',
      }"
      class="top"
    ></div>
    <div
      :style="{
        backgroundColor: nodeData.currentStyle.fill,
      }"
      class="center"
    ></div>
    <div
      :style="{
        backgroundColor: nodeData.currentStyle.fill,
        borderRadius: '0 0 50% 50%',
      }"
      class="footer"
    ></div>
  </div>
</template>
<script>
import mixin from "./mixin";
export default {
  name: "TestCom5",
  mixins: [mixin],
  data() {
    return {
      nodeData: {
        shape: "TestCom5", //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        text: "罐",
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: "#fff",
          stroke: "#000",
          // strokeWidth: 4
        },
        isDropEnd: false,
        width: 100,
        height: 100,
        // 其他样式
        style: {},
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  svg {
    width: 100%;
    height: 100%;
  }
  .top {
    width: 100%;
    height: 20%;
    border: 1.5px solid #000;
    border-radius: 50% 50% 0 0;
  }
  .center {
    width: 100%;
    height: 60%;
    border: 1.5px solid #000;
  }
  .footer {
    width: 100%;
    height: 20%;
    border-radius: 0 0 50% 50%;
    border: 1.5px solid #000;
  }
}
</style>
